<template>
	<div :class="{'team-home' : btnStatus, 'team-home-nav-status' : !btnStatus}">
		<home-header @navBtn="navChange" :bannerUrl="url"></home-header>
		<div class="content">
			<h3>团队风采</h3>
			<h6>北京宏凯名捷人力资源</h6>
			<div class="img-content">
				<img v-for="(item, index) in imgUrl" :src="item" :key="index">
			</div>
		</div>
		<home-footer></home-footer>
		<home-nav></home-nav>
	</div>
</template>

<script>
import HomeHeader from "@/Home/HomeHeader";
import HomeFooter from "@/Home/HomeFooter";
import HomeNav from "@/Home/HomeNav";
export default {
  name: "TeamHome",
  data() {
    return {
      btnStatus: true,
      url: require("../assets/img/about-banner.jpg"),
      imgUrl: [
        require("../assets/img/team-img.jpg"),
        require("../assets/img/team-img2.jpg"),
        require("../assets/img/team-img.jpg"),
        require("../assets/img/team-img2.jpg")
      ]
    };
  },
  methods: {
    navChange: function(re) {
      this.btnStatus = re;
    }
  },
  components: {
    HomeHeader,
    HomeFooter,
    HomeNav
  }
};
</script>

<style lang="stylus" scoped>
.team-home
	position relative
	transform translateX(0rem)
	transition all .5s linear
	width 100%
	overflow hidden
.team-home-nav-status
	position relative
	transform translateX(-4.65rem)
	transition all .5s linear

.img-content
	display flex
	margin-bottom .3rem
	justify-content space-evenly
	flex-wrap wrap-reverse
	img
		width 2.97rem
		height 3.72rem
		margin-top .2rem
h3
	font-size .34rem
	color #333
	margin .37rem 0
	text-align center
h6
	font-size .2rem
	color #00a0ea
	margin .24rem 0
	text-align center
.desc
	width 96%
	padding 0 2%
	img
		width 100%
	p
		font-size .16rem
		color #2f2f2f
		text-align left
		line-height .34rem
		margin .1rem 0
</style>
